<template>
	<view>
		<view class="title">
			Family
		</view>
		<view @click="goLogin" class="c-registered">
			登录
		</view>
		<view class="login-view">
			<view class="account">
				<text class="inp">账号：</text>
				<view>
					<uv-input focus prefixIcon="chat" placeholder="请输入账号" border="surround" v-model="data.userInfo.username" clearable ></uv-input>
				</view>
			</view>
			<!-- <view class="account">
				<text class="inp">手机号：</text>
				<view>
					<uv-input focus prefixIcon="chat" placeholder="请输入手机号" border="surround" v-model="data.userInfo.phone" clearable ></uv-input>
				</view>
			</view> -->
			<!-- <button class="button-login" @click="Mtlogin">登录</button> -->
		</view>
		<view class="sub">
			<uv-button class="button-login" @click="Mtlogin" type="primary" text="注册"></uv-button>
			<!-- <uv-button class="button-login"  @click="goto" type="primary" text="点击跳转"></uv-button> -->
		</view>
		
	</view>
</template>

<script setup>
	import {ref,onMounted,reactive} from 'vue'
	import {getUserAll,register} from '@/api/api'
	let data = reactive({
		userInfo:{
			username: '',
			},
		token: '',
	})
	onMounted(()=>{
		// getapi()
	});
	const Mtlogin = async ()=>{
		try{
			let res = await register(data.userInfo);
			uni.setStorageSync("TOKEN",res.token)
			// goto();// 跳转
		}finally{
		}
	}
	const goto = ()=>{
		uni.switchTab({
			url:'/pages/tabbar/message/message'
		})
	}
	const goLogin = ()=>{
		uni.reLaunch({
			url:'/pages/login/login'
		})
	}
</script>

<style lang="scss" scoped>
	body {
		background-color: #fff;
	}
 .title {
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 background-color: #55aaff;
	 font-size: 80px;
	 height: 260px;
 }
 .login-view {
	 margin: auto;
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 justify-content: center;
	 height: 250px;
	 background-color: #fff;
 }
 .account {
	 display: flex;
	 align-items: center;
	 justify-content: right;
	 margin: 10px;
 }
 .button-login {
	 width: 120px;
 }
 .sub {
	 display: flex;
	 justify-content: center;
	 margin-top: 50px;
	 // background-color: #fff;
 }
 .c-registered {
	position: absolute;
	right: 10px;
	margin-top: 10px;
	color: #55aaff;
 }
 .inp {
	 width: 70px;
 }
</style>
